<template>
  <div class="bottom-view">
    <el-card shadow="hover" class="view">
      <div>搜索关键词</div>
      <div class="search-view">
        <div class="chart-wrap">
          <div class="chart">
            <div class="title">搜索用户数</div>
            <div class="count">{{ moneyFormat(lineChartData.totalUser) }}</div>
            <v-chart :option="getLineOption('userList')"></v-chart>
          </div>
          <div class="chart">
            <div class="title">搜索量</div>
            <div class="count">{{ moneyFormat(lineChartData.totalCount) }}</div>
            <v-chart :option="getLineOption('countList')"></v-chart>
          </div>
        </div>
      </div>
      <div class="search-table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="rankNo" label="排名"> </el-table-column>
          <el-table-column prop="word" label="关键字"> </el-table-column>
          <el-table-column prop="count" label="搜索数量"> </el-table-column>
          <el-table-column prop="user" label="搜索用户数"> </el-table-column>
          <el-table-column prop="range" label="搜索占比"> </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" :total="tableTotalData.length" v-model:current-page="currentPage" :page-size="pageSize">
          <!-- 通过给pagination添加两个属性,这个属于前端分页,将数据全部拿到,在通过数组的切割方法,分成不同的份数,点击页码,改变后在展示不同的枫树 -->
        </el-pagination>
      </div>
    </el-card>
    <el-card shadow="hover" class="view">
      <template #header>
        <div>分类销售排行</div>
        <el-radio-group v-model="radioSelect" size="small">
          <el-radio-button label="品类"></el-radio-button>
          <el-radio-button label="商品"></el-radio-button>
          <!-- <div ref="main"></div> -->
        </el-radio-group>
      </template>
    </el-card>
  </div>
</template>
<script lang="ts">
export default {
  name: "Keyword",
}
</script>
<script lang="ts" setup>
import * as echarts from "echarts"
import type { EChartsType } from "echarts"
import { ref, computed, reactive } from "vue"
import { useReportData } from "@/stores/reportData" // 引入小菠萝获取数据
import useFormat from "@/hooks/useFormat"
// const chartDom = ref()
// var myChart = echarts.init(chartDom)
var option
// 对格式化数据的函数进行解构
const { numberFormat, moneyFormat } = useFormat()
const reportDataStore = useReportData()

const currentPage = ref(1)
const pageSize = ref(5)
const radioSelect = ref("品类")
// 准备数据
const searchWord = computed(() => reportDataStore.reportData.searchWord)
// 列表数据
const tableTotalData = computed(() => {
  if (!searchWord.value) return []
  return searchWord.value.map((item, index) => ({
    ...item,
    rankNo: index + 1,
    range: ((item.user / item.count) * 100).toFixed(2) + "%",
  }))
})

// 根据完整表格数据实现分页效果
const tableData = computed(() => {
  // 1  1--5   2  6--10  3 11--15
  // 真正获取数据的时候，是从数组中根据索引来获取数据的
  // slice(start,end)  end截不到
  return tableTotalData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
  // return tableTotalData.value.slice(0,4) // (currentPage-1)*pageSize
  // return tableTotalData.value.slice(5,9)
  // return tableTotalData.value.slice(10,14)
})
// 准备图表的数据
const lineChartData = computed(() => {
  const data = {
    wordList: [] as string[], // 水平轴需要的数据
    userList: [] as number[], // 搜索用户数的Y轴使用的数据
    countList: [] as number[], // 搜索量图形Y轴要使用的数据
    totalUser: 0, // 总的搜索用户数
    totalCount: 0, //
  }

  if (tableTotalData.value && tableTotalData.value.length > 0) {
    // 将数据处理一下,
    tableTotalData.value.forEach(item => {
      data.wordList.push(item.word)
      data.userList.push(item.user)
      data.countList.push(item.count)
      data.totalUser += item.user
      data.totalCount += item.count
    })
  }
  return data
})

// 准备表格上面的折线图的配置项数据
// 由于两个折线图的样式几乎一样，只有数据不一样的
const getLineOption = (listName: "userList" | "countList", name: string) => {
  return {
    xAxis: {
      boundaryGap: false, // 去掉两边留白
      data: lineChartData.value.wordList,
    },
    yAxis: {
      show: false,
    },
    series: {
      type: "line",
      data: lineChartData.value[listName],
      smooth: true,
      areaStyle: {
        color: "#c7e7e7",
      },
      // 折点 就是小圆圈
      itemStyle: {
        opacity: 0,
      },
      lineStyle: {
        color: "#5FBBFF",
      },
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
  }
}

// 饼图配置项
option = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: "5%",
    left: "center",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "40",
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
      ],
    },
  ],
}
// option && myChart.setOption(option)
</script>

<style lang="scss" scoped>
.bottom-view {
  display: flex;
  margin-top: 20px;

  .view {
    flex: 1;
    // 连字符,用于属性较长的情况,直接拼接上一级的属性
    &:first-child {
      margin-right: 10px;
    }

    &:last-child {
      margin-left: 10px;
    }

    :deep(.el-card__header) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
    }

    .search-view {
      height: 120px;
      display: flex;
      flex-direction: column;

      .chart-wrap {
        display: flex;

        .chart {
          flex: 1;

          &:first-child {
            margin-right: 5px;
          }

          &:last-child {
            margin-left: 5px;
          }

          .title {
            font-size: 14px;
            color: #999;
          }

          .count {
            font-size: 22px;
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
          }

          .echarts {
            height: 50px;
          }
        }
      }

      .search-table {
        flex: 1;
        margin-top: 20px;

        .el-pagination {
          text-align: right;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
